<script setup>
import { ref, reactive, toRefs } from 'vue'
import api from '@/api'
import { ElMessage } from 'element-plus'
import List from '@/components/List/index.vue'

const router = useRouter()

const data = reactive({
    table: false,
    drawer: false,
    dialog: false,
    loading: false,
    active: 0,
    formLabelWidth: '80px',
    timer: null,
    formData: {
        code: '',
        name: '',
        mName: '',
        supplier: '',
        number: '',
        unit: '',
        createTime: '',
        newOld: '',
    },
    registerNewDeviceForm: {
        eId: '',
        date: new Date(),
        user: '',
        userId: '',
        cycle: '',
        d1: '',
        dId1: '',
        d2: '',
        dId2: '',
        remark: '',

        
    }
})

const ruleFormRef = ref()

const rules = reactive({
    eId: [{ required: true, message: '请输入ID！', trigger: 'blur' },],
})

const next = () => {
    if (active.value < 3) { active.value = active.value + 1 }
}
const before = () => {
    if (active.value > 0) { active.value = active.value - 1 }
    console.log('before', active)
}

const submit = async (state) => {
    if (!ruleFormRef.value) return
    await ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            return new Promise(resolve => {
                api.post('api/action/give', data.registerNewDeviceForm)
                    .then(res => {
                        if (res.c === 0) {
                            ElMessage({
                                message: '回收成功',
                                type: ''
                            })
                        } else {
                            ElMessage({
                                message: res.m,
                                type: 'error'
                            })
                        }
                        
                    })
            })
        
                
             } else {
            ElMessage({
                type: 'error',
                message: Object.values(fields).map(i => i[0].message).join()
            })
        }
    })
}

const handleClick = incomingValue => {
    
    if(!incomingValue) {
        return
    }

    data.registerNewDeviceForm.eId = incomingValue.id

    for(let i in incomingValue) {
        if(i in data.formData) {
            data.formData[i] = incomingValue[i]
        }
    }
    api.post('api/equipment/equipmentDetail', {'id': incomingValue.id, 'type': '1'})
    .then(res => {
        let d = res.d.actions[res.d.actions.length - 1]
        data.formData.user = d.user1
        data.formData.date = d.actionDate
        data.formData.address = d.address
    })
    data.registerNewDeviceForm.remark = ''
        
}


const querySearchUser = (str, cb) => {
    api.post('api/mgr/userList', {
        'deptId': '8',
        'name': str,
    }).then(res => {
        cb(res.d.records.slice(0, 5).map(i => ({...i, 'value': i.name})))
    })
}

const handleSelectUser = item => {
    data.registerNewDeviceForm.userId = item.id
}

const querySearchD1 = (str, cb) => {
    api.post('api/comp/departmentList', {
        'type': '1',
        'pym': str,
    }).then(res => {
        cb(res.d.slice(0, 5).map(i => ({...i, 'value': i.name})))
    })
}

const handleSelectD1 = item => {
    data.registerNewDeviceForm.dId1 = item.id
}

const onDblClick = rtr => {
    router.push(rtr)
}

const reset = () => {
    data.formData = {
        code: '',
        name: '',
        mName: '',
        supplier: '',
        number: '',
        unit: '',
        createTime: '',
        newOld: '',
    }
    data.registerNewDeviceForm = {
        eId: '',
        date: new Date(),
        user: '',
        userId: '',
        cycle: '',
        d1: '',
        dId1: '',
        d2: '',
        dId2: '',
        remark: '',        
    }
}

const {
    table,
    drawer,
    dialog,
    loading,
    active,
    formLabelWidth,
    timer,
    formData,
    registerNewDeviceForm
} = toRefs(data)
</script>

<template>
    <div>
        <page-main>
            <List @handleClick="handleClick" status="2" />

            <!-- <el-button type="primary" style="margin-top: 20px;" @click="dialog = true">设备发放</el-button> -->
				
            <!-- <el-drawer
                ref="drawer"   
                v-model="dialog"			
                title="设备发放"
                direction="rtl"
                custom-class="demo-drawer"
                size="80%"
            > -->
            <el-card style="margin-top: 40px;">
                <div class="drawer__content">
                    <!--新设备登记第一步表单1-->
                    <el-form :inline="true" ref="ruleFormRef"
                        :rules="rules"
                        :model="registerNewDeviceForm"
                        label-position="left"
                        label-width="100px"
                        >
                        
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="设备编号">
                                    <el-input  disabled v-model="formData.code" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="设备名称">
                                    <el-input  disabled v-model="formData.name" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="6">
                                <el-form-item label="领接人">
                                    <el-input  disabled v-model="formData.user" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="设备单位">
                                    <el-input  disabled v-model="formData.unit" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="设备型号">
                                    <el-input  disabled v-model="formData.mName" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="6">
                                <el-form-item label="发放日期">
                                    <el-input  disabled v-model="formData.date" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="数量">
                                    <el-input  disabled v-model="formData.number" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="安装地点">
                                    <el-input  disabled v-model="formData.address" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    
                        <!--第一行-->
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="回收日期：">
                                    <el-date-picker  type="date" v-model="registerNewDeviceForm.date" placeholder="输入时间" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="回收单位" @dblclick.native="">
                                    <el-autocomplete 
                                        v-model="registerNewDeviceForm.d2" 
                                        :fetch-suggestions="querySearchD2"
                                        @select="handleSelectD2"
                                        placeholder="请输入回收单位"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="接收人" @dblclick.native="onDblClick('/system/staff/staffManage/receive')">
                                    <el-autocomplete 
                                        v-model="registerNewDeviceForm.user" 
                                        :fetch-suggestions="querySearchUser"
                                        @select="handleSelectUser"
                                        placeholder="请输入接受人"
                                        />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="接收单位" @dblclick.native="onDblClick('/others/department')">
                                    <el-autocomplete 
                                        v-model="registerNewDeviceForm.d1" 
                                        :fetch-suggestions="querySearchD1"
                                        @select="handleSelectD1"
                                        placeholder="请输入接收单位"
                                    />
                                </el-form-item>
                            </el-col>
                            
                            <el-col>
                                <p style="float: left">备注：</p>
                                <el-input  v-model="registerNewDeviceForm.remark" type="textarea" :rows="5" placeholder="请输入内容" />
                            </el-col>
                            <el-col style="margin-left: 80%; transform: translateX(-50%); margin-top: 30px;">
                                <el-button type="primary" :loading="loading" @click="submit">回&nbsp;&nbsp;&nbsp;&nbsp;收</el-button>
                                <el-button type="primary" :loading="loading" @click="reset">重&nbsp;&nbsp;&nbsp;&nbsp;置</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            <!-- </el-drawer> -->
            </el-card>
        </page-main>
    </div>
</template>
